<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>什么都论坛-登录</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f0f5f5;
            overflow: hidden;
        }

        body::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #3399ff;
            clip-path: circle(20% at 100% 0);
        }

        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40rem;
            /* 增宽 */
            height: 30rem;
            perspective: 1500px;
            overflow: visible;
            /* 关键：防止子元素被裁剪 */

        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20rem;
            height: auto;
            backface-visibility: hidden;
            transition: transform 0.6s ease-in-out;
        }

        .login {
            transform: translate(-50%, -50%) rotateY(0deg);
            z-index: 2;
            /* 默认显示登录表单 */
        }

        .signup {
            transform: translate(-70%, -50%) rotateY(180deg);
            z-index: 1;
        }

        .container .form-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            box-shadow: 0 0 1px #3399ff;
            border-radius: 30px;
            background-color: #fff;
        }

        .container .form-content .avtar {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .container .form-content .avtar .pic {
            position: relative;
            width: 80px;
            height: 80px;
            overflow: hidden;
            border-radius: 50%;
            border: 1px solid #3399ff;
        }

        .container .form-content .avtar .pic img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .container .form-content h1 {
            font-size: 1.6rem;
        }

        .container .form {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .container .form input {
            width: 16rem;
            padding: 0.8rem;
            padding-left: 3rem;
            outline: none;
            border: none;
            border-radius: 15px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            margin: 5px;
        }

        .container .form div {
            position: relative;
        }

        .container .form div .fa {
            position: absolute;
            top: 18px;
            left: 25px;
        }

        .container .form .btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-top: 10px;
        }

        .container .form .btn button {
            text-transform: uppercase;
            padding: 8px;
            border: none;
            outline: none;
            background-color: #0066ff;
            color: #fff;
            width: 12rem;
            border-radius: 30px;
            cursor: pointer;
        }

        .container .btn-something {
            color: #888;
            font-size: 14px;
        }

        .container .btn-something span {
            color: #0066ff;
            cursor: pointer;
            font-weight: 500;
        }

        svg {
            position: absolute;
            bottom: 0;
            z-index: -1;
        }

        .user {
            position: absolute;
            top: 16rem;
            left: 5rem;
        }

        .user .fa-user {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 5rem;
            color: #0066ff;
        }

        .user .head {
            font-size: 1.6rem;
            text-transform: uppercase;
            text-shadow: 1px 1px 1px rgba(16, 16, 16, 0.1), 1px 2px 1px rgba(16, 16, 16, 0.1), 1px 3px 1px rgba(16, 16, 16, 0.1), 1px 4px 1px rgba(16, 16, 16, 0.1), 1px 5px 1px rgba(16, 16, 16, 0.1), 1px 6px 1px rgba(16, 16, 16, 0.1), 1px 7px 1px rgba(16, 16, 16, 0.1), 1px 8px 1px rgba(16, 16, 16, 0.1);
        }
    </style>
    <!-- 登录表单样式 -->
    <style>
        .login-container {
            width: 350px;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 4px 24px rgba(3, 39, 179, 0.10);
            padding: 36px 32px 28px 32px;
            text-align: center;
        }

        .logo {
            margin-bottom: 18px;
        }

        .logo img {
            width: 220px;
        }

        .login-title {
            color: #0327B3;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 28px;
            letter-spacing: 2px;
        }

        .input-group {
            margin-bottom: 20px;
            text-align: left;
        }

        .input-group label {
            color: #0327B3;
            font-size: 15px;
            margin-bottom: 6px;
        }

        .input-group input {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #0327B3;
            border-radius: 8px;
            font-size: 15px;
            outline: none;
            transition: border-color 0.2s;
        }

        .login-btn {
            width: 100%;
            padding: 12px 0;
            background: #0327B3;
            color: #ffff72;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
            margin-top: 10px;
            letter-spacing: 2px;
        }

        .login-btn:hover {
            background: #021c7e;
        }

        .register-link {
            display: block;
            margin-top: 18px;
            color: #2A4DD0;
            text-decoration: none;
            font-size: 14px;
            cursor: pointer;
        }

        .register-link:hover {
            color: #041F9A;
        }
    </style>
    <!-- 注册表单样式 -->
    <style>
        .register-container {
            width: 480px;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 4px 24px rgba(3, 39, 179, 0.10);
            padding: 36px 32px 28px 32px;
            text-align: center;
        }

        .logo {
            margin-bottom: 18px;
        }

        .logo img {
            width: 220px;
        }

        .register-title {
            color: #0327B3;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 28px;
            letter-spacing: 2px;
        }

        .row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .row .input-group {
            width: 48%;
            /* 两个输入框之间留一点空隙 */
        }

        .avatarRow {
            display: flex;
            align-items: center;
            margin-bottom: 18px;
        }

        .avatarRow .input-group {
            flex: 7;
        }

        .avatarRow .avatar-preview {
            flex: 3;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .input-group {
            margin-bottom: 18px;
            text-align: left;
        }



        .input-group input[type="text"],
        .input-group input[type="password"] {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid #0327B3;
            border-radius: 8px;
            font-size: 15px;
            outline: none;
            transition: border-color 0.2s;
        }

        .gender-group {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-top: 4px;
        }



        .gender-item {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: #0327B3;
            font-size: 15px;
            margin-bottom: 0;
            font-weight: normal;
        }

        .input-group input[type="file"] {
            border: none;
            background: none;
            color: #0327B3;
            font-size: 15px;
        }

        .register-btn {
            width: 100%;
            padding: 12px 0;
            background: #0327B3;
            color: #ffff72;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.2s;
            margin-top: 10px;
            letter-spacing: 2px;
        }

        .register-btn:hover {
            background: #021c7e;
        }

        .login-link {
            display: block;
            margin-top: 18px;
            color: #2A4DD0;
            text-decoration: none;
            font-size: 14px;
            cursor: pointer;
        }

        .login-link:hover {
            color: #041F9A;
        }

        .avatar-preview {
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .avatar-preview img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #0327B3;
            background: #f6f8ff;
        }
    </style>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="#0099ff" fill-opacity="1"
            d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
        </path>
    </svg>

    <div class="container">
        <!-- 登录开始 -->
        <div class="box login">
            <div class="login-container">
                <div class="logo">
                    <img src="../image/logo.png" alt=Logo">
                </div>
                <div class="login-title">欢迎登录</div>
                <form action="../control/doLogin.php" method="post">
                    <div class="input-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" name="uName" placeholder="请输入用户名" required>
                    </div>
                    <div class="input-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" name="uPass" placeholder="请输入密码" required autocomplete="current-password">
                    </div>
                    <?php
                        if (isset($_GET['error'])) {
                            echo "<h6 style='color:red;'>用户名或密码错误</h6>";
                        }
                    ?>
                    <button type="submit" class="login-btn">登录</button>
                </form>
                <a class="register-link">还没有账号？立即注册</a>
            </div>
        </div>
        <!-- 登录结束 -->
        <!-- 注册开始 -->
        <div class="box signup">
            <div class="register-container">
                <div class="logo">
                    <img src="../image/logo.png" alt="什么都论坛 Logo">
                </div>
                <div class="register-title">注册新账号</div>
                <form action="../control/doReg.php" method="post" name="regForm" enctype="multipart/form-data">
                    <div class="row">
                        <div class="input-group">
                            <label for="username">用户名</label>
                            <input type="text" name="uName" placeholder="请输入用户名" required>
                        </div>
                        <div class="input-group">
                            <label>性别</label>
                            <div class="gender-group">
                                <label class="gender-item"><input type="radio" name="gender" value="1" required>男
                                </label>
                                <label class="gender-item"><input type="radio" name="gender" value="2">女</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-group">
                            <label for="password">密码</label>
                            <input type="password" name="uPass" placeholder="请输入密码" requiredautocomplete="current-password">
                        </div>
                        <div class="input-group">
                            <label for="confirm-password">确认密码</label>
                            <input type="password" id="confirm-password" name="uPass1" placeholder="请再次输入密码" requiredautocomplete="current-password">
                        </div>
                    </div>
                    <div class="avatarRow">
                        <div class="input-group">
                            <label for="avatar">上传头像</label>
                            <input type="file" id="avatar" name="head" accept="image/*" onchange="previewAvatar(event)">
                        </div>
                        <div class="avatar-preview" id="avatarPreview"></div>
                    </div>

                    <button type="submit" class="register-btn" onclick="check()">注册</button>
                </form>
                <a class="login-link">已有账号？去登录</a>
            </div>
        </div>
        <!-- 注册结束 -->
    </div>

</body>
<script>
    let login = document.querySelector(".login");
    let signup = document.querySelector(".signup");

    let loginbtn = document.querySelector(".login-link");
    let siginupbtn = document.querySelector(".register-link");

    siginupbtn.addEventListener("click", () => {
        login.style.transform = "translate(-50%, -50%) rotateY(-180deg)";
        signup.style.transform = "translate(-70%, -50%) rotateY(0deg)";
        login.style.zIndex = "1";
        signup.style.zIndex = "2";
    });

    loginbtn.addEventListener("click", () => {
        login.style.transform = "translate(-50%, -50%) rotateY(0deg)";
        signup.style.transform = "translate(-50%, -50%) rotateY(180deg)";
        login.style.zIndex = "2";
        signup.style.zIndex = "1";
    });


    function previewAvatar(event) {
        const preview = document.getElementById('avatarPreview');
        preview.innerHTML = '';
        const file = event.target.files[0];
        if (file) {
            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            preview.appendChild(img);
        }
    }
</script>

</html>